<template>
  <div class="mainTitle">推荐文章</div>

  <div class="papers">
    <index-hot-papers></index-hot-papers>
  </div>

  <div class="bot-semicircle"></div>


  <div class="mainTitleCreator">推荐创作者</div>

  <hr class="hrBorder"/>
  <div class="comps">
    <index-scholars class="indexScholars"></index-scholars>
    <index-hot-institutes class="indexScholars"></index-hot-institutes>
  </div>





</template>

<script>
import IndexScholars from "@/index/components/IndexHotScholars";
import IndexHotPapers from "@/index/components/IndexHotPapers";
import IndexStatistics from "@/index/components/IndexStatistics";
import IndexHotInstitutes from "@/index/components/IndexHotInstitutes";
export default {
  name: "IndexMainContent",
  components: {IndexHotInstitutes, IndexStatistics, IndexHotPapers, IndexScholars},
  data() {
    return {
      scholarTitle: '  \t 热门学者'
    }
  }
}
</script>

<style scoped>

.mainTitle {
  font-size: x-large;
  font-family: "Times New Roman", "Arial Black",serif;
  font-weight: bold;
  text-align: center;
}

.mainTitleCreator {
  font-size: x-large;
  font-family: "Times New Roman", "Arial Black",serif;
  font-weight: bold;
  text-align: center;
  color: white;
}

.bot-semicircle {
  margin-left: 44.5%;
  margin-bottom: 2%;
  position: center;
  align-self: center;
  width: 120px;
  height: 60px;
  background: white;
  border-radius: 0 0 60px 60px;
}


  .comps{
    display: flex;
    justify-content: space-between;
  }

  .papers{
    margin-top: 2%;
    width: 100%;
  }

  .indexScholars {
    width: 45%;
  }

  .hrBorder {
    margin-bottom: 2px;
    height: 4px;
    background-color: #6b6ba5;
    border-color: #6b6ba5;

  }


</style>